<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="common.jsp"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">

<title>${htmlTitle}</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="home">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">
	$(function () {
		cityId = '${cityId}';
	//////////////////////////////////////////////////////////////////用户消费趋势图///////////////////////////////////////////////////////////////////
	    var xtextUser = [];//X轴TEXT
	    //var color = ["#7CB5EC","#F65A65","#90ED7D"];
	    var userUrl = "<%=basePath%>getUserChargeCharts"; 
	    $.ajax({
	        type:'post',
	        url:userUrl, 
	         data: {
		    	cityId:cityId
		    	},
	        success:function(result){
	            var json = JSON.parse(result);
	            	if(json.code==1){
	            		var money_arr=new Array(json.data.length);
	            		var count_arr=new Array(json.data.length);
	            		var num_arr=new Array(json.data.length);
		            	for(var key in json.data){
		            		xtextUser[key] = json.data[key].name;//给X轴TEXT赋值
		                	money_arr[key] = json.data[key].money; //充值金额
		                	count_arr[key] = json.data[key].count; //交易次数
		                	num_arr[key]= json.data[key].num; //新增用户
	            	}
	                userCharge.series[0].setData(money_arr);//数据填充到highcharts上面
	                userCharge.series[1].setData(count_arr);
	                userCharge.series[2].setData(num_arr);
	            }else{
	            	alert(json.text);
	            }
	            
	        },
	        error:function(e){
	        }
	 }); 
   var userCharge = new Highcharts.Chart({
    		chart: {
           	 	renderTo: 'userCharge',
			 	marginTop:20,
			    zoomType: 'xy'
			},
			title: {
				 text: ''
			},
			xAxis: [{
				categories: xtextUser,
			    crosshair: true
			}],
			yAxis: [ { // Secondary yAxis
			    title: {
			        text: ' ',
			        style: {
			            color: Highcharts.getOptions().colors[0]
			        }
		   		 },
				    labels: {
				        format: '{value}',
				        style: {
				            color: Highcharts.getOptions().colors[0]
				        }
				    },
			    	opposite: true
				}
				,{ // Primary yAxis
				    labels: {
				        format: '{value}',
				        style: {
				            color: Highcharts.getOptions().colors[1]
				        }
				    },
				    title: {
				        text: ' ',
				        style: {
				            color: Highcharts.getOptions().colors[1]
				        }
				    }
				}],
				tooltip: {
				    shared: true
				},
				legend: {
				    align: 'center',
				    x: 0,
				    verticalAlign: 'bottom',
				    y: 0,
				    floating: false,
				    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
				},
			series: [{
				    name: '充值金额',
				    type: 'column',
				    yAxis: 1,
				    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6],
				    tooltip: {
				        valueSuffix: '  '
				    }
			
				},{
				    name: '交易次数',
				    type: 'column',
				    yAxis: 1,
				    data: [49, 71, 106, 129, 144, 176, 135],
				    tooltip: {
				        valueSuffix: '  '
				    }
				}, {
				    name: '新增用户',
				    type: 'spline',
				    data: [7, 6, 9, 14, 18, 21, 25],
				    tooltip: {
				        valueSuffix: ' '
				    }
				}]
			});
//////////////////////////////////////////////////////////////////停车缴费柱状图///////////////////////////////////////////////////////////////////
	    var y = [];//Y轴
	    var xtext = [];//X轴TEXT
	   // var color = ["gray","pink","red","blue","yellow","green","#fff"];
	    var payUrl = "<%=basePath%>getPayParkingCharts"; 
	    $.ajax({
	        type:'post',
	        url:payUrl, 
	         data: {
		    	cityId:cityId
		    	},
	        success:function(result){
	            var json = JSON.parse(result);
	            	if(json.code==1){
		            	for(var key in json.data){
		                	json.data[key].y = json.data[key].value; //给Y轴赋值
		                	xtext = json.data[key].name;//给X轴TEXT赋值
		                	//json.data[key].color= color[key];
	            	}
	                payChart.series[0].setData(json.data);//数据填充到highcharts上面
	            }else{
	            	alert(json.text);
	            }
	            
	        },
	        error:function(e){
	        }
	 }); 
    // Set up the chart 停车缴费柱状图
    var payChart = new Highcharts.Chart({
        chart: {
            renderTo: 'payParkingCharts',
            type: 'column',
            margin: 75,
            marginTop:20,
            options3d: {
                enabled: true,
                alpha: 5,
                beta: 5,
                depth: 50,
                viewDistance: 25
            }
        },
        title: {
            text: ''
        },
        plotOptions: {
            column: {
                depth: 35
            }
        },
         legend: {
            enabled: false
        },
        xAxis: {
            categories:xtext
        },
		 yAxis: {
            title: {
            	text: '',
                margin: 0
            }
        },
         series: [{
         	name:"停车缴费",
            data: []
        }]
    });
//////////////////////////////////////////////////////////////////消费区域分布饼图///////////////////////////////////////////////////////////////////
	    var yesterday = '';
	   // var color = ["gray","pink","red","blue","yellow","green","#fff"];
	   if(cityId==null||cityId.trim()==""){
	   	cityId=1;
	   }
	    var pieUrl = "<%=basePath%>getPieCharts"; 
	    $.ajax({
	        type:'post',
	        url:pieUrl, 
	         data: {
		    	cityId:cityId
		    	},
	        success:function(result){
	          var json = JSON.parse(result);
	            if(json.code==1){
	               	yesterday=json.date;
	             	//定义一个数组
                  	var area_arr = [];
                  	var way_arr = [];
                    //迭代，把异步获取的数据放到数组中
                     $.each(json.areaList,function(i,d){
                      	 area_arr.push([d.name,d.value]);
                     });
                    $.each(json.wayList,function(i,d){
                        way_arr.push([d.name,d.value]);
                    });
                    //设置数据
		            payArea.series[0].setData(area_arr);//数据填充到highcharts上面
	                payWay.series[0].setData(way_arr);
	                var areaChart = $('#payArea').highcharts();
	                areaChart.setTitle( {text: '<span class="chartsFont" style="color:#6CC5FF; ">'+yesterday+'</span><span class="chartsFont" >消费区域分布<span>'});// 更新标题的文字
	                 var wayChart = $('#payWay').highcharts();
	                wayChart.setTitle( {text: '<span class="chartsFont" style="color:#6CC5FF; ">'+yesterday+'</span><span class="chartsFont" >消费渠道分布<span>'});// 更新标题的文字
	            }else{
	            	alert(json.text);
	            }
	            
	        },
	        error:function(e){
	        }
	 }); 
	 
	   var payArea = new Highcharts.Chart({
        chart: {
            	renderTo: 'payArea',
	         	marginTop:0,
	            type: 'pie'
	        },
	        title: {
	            text: '<span class="chartsFont" style="color:#6CC5FF; ">'+yesterday+'</span><span class="chartsFont" >消费区域分布<span>'
	        },
	        plotOptions: {
	            series: {
	                dataLabels: {
	                    enabled: true,
	                    format: '<span">{point.y:.1f}%</span>'
	                }
	            },
	              pie: {  
                    size:'60%',  
                    allowPointSelect: true,  
                    cursor: 'pointer',  
                    startAngle: 50,  
                    dataLabels: {  
	                    enabled: true,  
	                    color: '#000',                        
	                    distance: -30,//通过设置这个属性，将每个小饼图的显示名称和每个饼图重叠  
	                    style: {                              
	                        fontSize: '0.8em',  
	                        lineHeight: '10px'  
	                    },  
	                    formatter: function(index) {      
	                            return  '<span style="color:#00008B;">' + this.point.name + '</span>';  
	                       }  
                  } ,
                    showInLegend: true
                }  
	        },
            
        legend: {
                align: 'center', //水平方向位置
	            verticalAlign: 'bottom', //垂直方向位置
	            x: 0, //距离x轴的距离
	            y: -80, //距离Y轴的距离
                borderWidth: 0,
                labelFormatter: function() {
                    return this.name+'&nbsp';
                },
                useHTML:true
            },

	        tooltip: {
	            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
	            pointFormat: '<span style="color:{point.color}">{point.name}</span>:<b>{point.y:.2f}%</b><br/>'
	        },
	        series: [{
	            name: '详情',
	            colorByPoint: true,
	            data: []
	        }]
	        
	    });
	      //////////////////////////////////////////////////////////////////消费渠道分布饼图///////////////////////////////////////////////////////////////////
	  var payWay = new Highcharts.Chart({
        chart: {
            renderTo: 'payWay',
	         	marginTop:0,
	            type: 'pie'
	        },
	        title: {
	            text: '<span class="chartsFont" style="color:#6CC5FF; ">'+yesterday+'</span><span class="chartsFont" >消费渠道分布<span>'
	        },
	        plotOptions: {
	            series: {
	                dataLabels: {
	                    enabled: true,
	                    format: '<span">{point.y:.1f}%</span>'
	                }
	            },
	              pie: {  
                    size:'60%',  
                    allowPointSelect: true,  
                    cursor: 'pointer',  
                    startAngle: 50, 
                    dataLabels: {  
	                    enabled: true,  
	                    color: '#000',                        
	                    distance: -30,//通过设置这个属性，将每个小饼图的显示名称和每个饼图重叠  
	                    style: {                              
	                        fontSize: '0.8em',  
	                        lineHeight: '10px'  
	                    },  
	                    formatter: function(index) {      
	                            return  '<span style="color:#00008B;">' + this.point.name + '</span>';  
	                       }  
                  } ,
                    showInLegend: true
                }  
	        },
            
        legend: {
                align: 'center', //水平方向位置
	            verticalAlign: 'bottom', //垂直方向位置
	            x: 0, //距离x轴的距离
	            y: -70, //距离Y轴的距离
                labelFormatter: function() {
                    return this.name+'&nbsp';
                },
                useHTML:true
            },

	        tooltip: {
	            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
	            pointFormat: '<span style="color:{point.color}">{point.name}</span>:<b>{point.y:.2f}%</b><br/>'
	        },
	        series: [{
	            name: '详情',
	            colorByPoint: true,
	            data: []
	        }]   
	        
	    });
  //////////////////////////////////////////////////////////////////收费分析表格///////////////////////////////////////////////////////////////////
	    var tableUrl = "<%=basePath%>getChargeTable"; 
	    $.ajax({
	        type:'post',
	        url:tableUrl, 
	         data: {
		    	cityId:cityId
		    	},
	        success:function(result){
	         var json = JSON.parse(result);
		    	if(json.code==1){
					var len=0;
					len = json.data.length;
					var trHtml="";
					for(var i=0; i<len; i++)
					{		
						trHtml  +=' <tr>'
		                         +'    <td>'+json.data[i].area+'</td>'
		                         +'    <td>'+json.data[i].money.toFixed(2)+'</td>'
								 +'    <td>'+json.data[i].tradeCount+'</td>'
								 +'    <td>'+json.data[i].violationCount+'</td>'
								 +'    <td>'+json.data[i].payBerthCount+'</td>'
		                         +'</tr>';
					}
	               $("#areaTbody").html(trHtml);
	            }else{
	            	alert(json.text);
	            }
	            
	        },
	        error:function(e){
	        }
	 }); 
 });
	</script>
</head>

<body>
	<%--	<div class="container" >--%>
	<div>
		<!-- header -->
		<%@include file="header.jsp"%>
		<!-- header -->
		
		<div class="page-container">
				<div class="page-sidebar">
					<%= request.getAttribute("leftMenu") %>
				</div>

				<!-- PAGE CONTENT WRAPPER -->
				<div class="page-content">
					<div class="page-content-wrap">
					
						<div class="row mosaic-row">
							<div class="col-md-12 todayShow">
								<img src="static/images/index/title-data-1.png" /> &nbsp;
								今日数据发布&nbsp;( 截止 <span style="color: #6CC5FF;" class="nowDate">2016年03月29日
									12:00</span> )
							</div>
						</div>
					
						<div class="row" style="margin-top: 20px;">
							<div class="col-md-4">
								<div class="pull-left" style="line-height:30px; padding-right: 1rem">PDA编号</div>
                           		<div>
                                   	<div class="input-group-btn" >
                                   		   <input type="text" class="form-control" value=""/>                                      
                                    </div>
                                </div>
							</div>
							<div class="col-md-4">
								<div class="pull-left" style="line-height:30px; padding-right: 1rem">生产厂家</div>
                           		<div>
                                   	<div class="input-group-btn" >
                                   		  <select id="area" class="form-control select">
                                   		  	<option>全部</option>
                                           </select>                                       
                                    </div>
                                </div>
							</div>
							<div class="col-md-4">
								<div class="pull-left" style="line-height:30px; padding-right: 1rem">设备状态</div>
                           		<div>
                                   	<div class="input-group-btn" >
                                   		  <select id="area" class="form-control select">
                                   		  	<option>全部</option>
                                           </select>                                       
                                    </div>
                                </div>
							</div>
						</div>
						
						<div class="row" style="margin-top: 20px;">
							<div class="col-md-4">
								<div class="pull-left" style="line-height:30px; padding-right: 1rem">巡管类型</div>
                           		<div>
                                   	<div class="input-group-btn" >
                                   		  <select id="area" class="form-control select">
                                   		  	<option>全部</option>
                                           </select>                                       
                                    </div>
                                </div>
							</div>
							<div class="col-md-4">
								<button class="btn btn-primary"  style="margin-right: 2%">
									<span class="fa"></span>查询
								</button>
								<button class="btn btn-primary" >
									<span class="fa"></span>添加
								</button>
							</div>
						</div>
						
						<div class="row" style="margin: 30px 10px; ">
							<table id="pdaList" class="table table-hover "
								cellspacing="0" width="100%">
								<thead>
									<tr>
										<th>
											PDA编号
										</th>
										<th>
											生产厂家
										</th>
										<th>
											设备状态
										</th>
										<th>
											巡管类型
										</th>
										<th>
											训馆区域
										</th>
										<th>
											当前使用者
										</th>
										<th>
											联系方式
										</th>
										<th>
											备注
										</th>
										<th>
											操作
										</th>
									</tr>
								</thead>
							</table>
						</div>
						
					</div>
				</div>
				<!-- PAGE CONTENT WRAPPER -->
			</div>
		
		<!-- footer -->
		<%@include file="footer.jsp"%>
		<!-- footer -->
	</div>


	<script type="text/javascript">
	var cityId;
	$(document).ready(function() {
			cityId = '${cityId}';
			if(null == cityId || '' == cityId)
			{
				 cityId=1;
			} 
			showData(cityId);
			
			setNow();
	});
	
	function showData(cityId){
		var generalUrl = "<%=basePath%>getTodayGeneralVo"; 
		var start=$(".fontSize.color1").text().trim();
		 $.ajax({
	        url:generalUrl, 
		    type:'post',
		    data: {
		    	cityId:cityId,
		    	start:start
		    	},
		    success: function(result){
		     	var rtnResult = JSON.parse(result);
		    	if(rtnResult.code==1){
		    		rtn=rtnResult.data;
		    		$(".color1").text(rtn.dealMoneySum.toFixed(2));
		    		$(".color2").text(rtn.tradeSum.toFixed(0));
		    		$(".color3").text(rtn.payBerthSum.toFixed(0));
		    		$(".color4").text(rtn.violationSum.toFixed(0));
		    		$(".color5").text(rtn.rechargeMoneySum.toFixed(2));
		    		$(".color6").text(rtn.rechargeNumSum.toFixed(0));
		    		$(".color7").text(rtn.addUserNumSum.toFixed(0));
		    		$(".color8").text(rtn.enforcementSum.toFixed(0));
		    		
		    		//先清空原来的数据
		    		$(".append").remove();
		    		
					var len=0;
					len = rtn.dealMoneyDetail.length;
					for(var i=0; i<len; i++)
					{		
						var obj=rtn.dealMoneyDetail[i];
						obj.num=obj.num.toFixed(2)
						appendHtml(obj, "dealMoneyDetail");
					}
					
					 len = rtn.tradeDetail.length;
					 $("#tradeDetail").next().remove();
					for(var i=0; i<len; i++)
					{		
						var obj=rtn.tradeDetail[i];
						obj.num=obj.num.toFixed(0)
						appendHtml(obj, "tradeDetail");
					}
					
					 len = rtn.payBerthDetail.length;
					var payBerthDetailHtml="";
					for(var i=0; i<len; i++)
					{		
						payBerthDetailHtml+=appendHtmlArea(rtn.payBerthDetail[i]);
					}
					$('#payBerthDetail').html(payBerthDetailHtml);
					
					 len = rtn.violationDetail.length;
					var violationDetailHtml="";
					for(var i=0; i<len; i++)
					{		
						violationDetailHtml+=appendHtmlArea(rtn.violationDetail[i]);
					}
					$('#violationDetail').html(violationDetailHtml);
					
					 len = rtn.rechargeMoneyDetail.length;
					for(var i=0; i<len; i++)
					{	
						var obj=rtn.rechargeMoneyDetail[i];
						obj.num=obj.num.toFixed(2)	
						appendHtml(obj, "rechargeMoneyDetail");
					}
					
					 len = rtn.rechargeNumDetail.length;
					for(var i=0; i<len; i++)
					{	
						var obj=rtn.rechargeNumDetail[i];
						obj.num=obj.num.toFixed(0)	
						appendHtml(obj, "rechargeNumDetail");
					}
					
					 len = rtn.addUserNumDetail.length;
					for(var i=0; i<len; i++)
					{		
						var obj=rtn.addUserNumDetail[i];
						obj.num=obj.num.toFixed(0)	
						appendHtml(obj, "addUserNumDetail");
					}
					
					 len = rtn.enforcementDetail.length;
					var  enforcementHtml="";
					for(var i=0; i<len; i++)
					{		
						enforcementHtml+=appendHtmlArea(rtn.enforcementDetail[i]);
					}
					$('#enforcementDetail').html(enforcementHtml);
					//更新截止时间
					setNow();
		    	}else{
		    		alert(rtn.text);
		    	}
		    }
		});
	}

	function appendHtml(obj,idName)
	{
		var  liHtml='<div class="row">'
				+'<div class="col-md-7 append">'+obj.way+'</div>'
				+'<div class="col-md-5 append">'+obj.num+'</div>'
			+'</div>';
							
		$('#'+idName).append(liHtml);			
	}
	function appendHtmlArea(obj)
	{
		var  liHtml='<div class="row">'
				+'<div class="col-md-6">'+obj.way+'</div>'
				+'<div class="col-md-6">'+obj.num.toFixed(0)+'</div>'
			+'</div>';
							
		return liHtml;			
	}
	function refresh(){
		var url = "<%=basePath%>
		refresh";
			$.ajax(url, {
				type : 'post',
				success : function(result) {
				}
			});
		}

		//setInterval('showData('+cityId+')',300000); //指定5分钟刷新一次
		//更新截止时间
		setInterval('setNow()', 60000); //指定1分钟刷新一次

		//获取当前时间,格式 2015-09-05 10:00:00
		function getnowtime() {
			var nowtime = new Date();
			var year = nowtime.getFullYear();
			var month = padleft0(nowtime.getMonth() + 1);
			var day = padleft0(nowtime.getDate());
			var hour = padleft0(nowtime.getHours());
			var minute = padleft0(nowtime.getMinutes());
			var second = padleft0(nowtime.getSeconds());
			var millisecond = nowtime.getMilliseconds();
			millisecond = millisecond.toString().length == 1 ? "00"
					+ millisecond : millisecond.toString().length == 2 ? "0"
					+ millisecond : millisecond;
			return year + "年" + month + "月" + day + "日  " + hour + ":" + minute;
		}
		//补齐两位数
		function padleft0(obj) {
			return obj.toString().replace(/^[0-9]{1}$/, "0" + obj);
		}

		function setNow() {
			$(".nowDate").text(getnowtime());
		}
		//setInterval('setNow()',1000); //指定1秒刷新一次
	</script>
</body>
</html>
